<template>
  <div id="app">
    <BaseBox style="width: 480px">
      <!-- 标题 -->
      <h2>记事本</h2>
      

      <input type="text">
      <ul>
        <li>
          <div class="content"><span>1.</span> 西瓜</div>
          <!-- <button> ❌</button> -->
          <BaseButton>
            <template v-slot:icon>
              <div>二</div>
            </template>
            <template v-slot:times>
              <div>三</div>
            </template>
          </BaseButton>
        </li>
      </ul>
      <!-- 底部 -->
      <div class="bottom">
        <span>合计:0</span>

        <BaseButton>
          <template v-slot:icon> 
            二 
          </template>

          <template v-slot:times> 
            三
          </template>

        </BaseButton>
        
      </div>

    </BaseBox>
    <!-- 使用组件 -->
    <!-- <StuProps :name="'彭永彬'" :age="20" :gender="男"></StuProps> -->
    <StuProps :name="'name'" :age="20" :gender="男" :foods="['黑猫','白猫']"></StuProps>
    <StuProps :name="'彭什么彬'" :age="21" :gender="女"></StuProps>
  </div>
</template>

<script>
import BaseBox from './components/BaseBox.vue'
// import BaseTitle from './components/BaseTitle.vue'
// import BaseInput from './components/BaseInput.vue'
import BaseButton from './components/BaseButton.vue'
import StuProps from './components/StuProps.vue'

export default {
  name: 'App',
  components: {
    BaseBox,
    // BaseTitle,
    // BaseInput,
    BaseButton,
    StuProps
  },
  data(){
    return{
      name:"彭什么彬"
    }
  }
}
</script>

<style>
#app {
  text-align: center;
}
#app ul {
  padding: 0;
  max-height: 200px;
  overflow-y: scroll;
  margin-bottom: 0;
}
#app ul::-webkit-scrollbar {
  width: 0 !important;
}
#app li {
  list-style: none;
  border-bottom: 1px solid #6a4d52;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 25px;
  color: #8895a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
}
#app li:hover {
  background-color: #fcfaed;
}
#app li span {
  color: #6a4d52;
}
#app .bottom {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  color: #929093;
}
.bottom span {
  font-weight: 500;
}
</style>
